<template>
	<view class="content">
		<view class="tab">
			<view :class="['list',active==''?'active':'']" @tap="checktab('')">全部</view>
			<view :class="['list',active==1?'active':'']" @tap="checktab(1)">未下单</view>
			<view :class="['list',active==2?'active':'']" @tap="checktab(2)">已下单</view>
		</view>
		<view class="box" v-for="(item,index) in list" :key="index">
			<view class="item">
				<view class="code">
					<text>采购单号 {{item.sn_code}}</text>
				</view>
				<view class="list status">
					<text class="name">订单状态</text>
					<text v-if="item.status==1">等待采购</text>
					<text v-if="item.status==2">采购进行中</text>
					<text v-if="item.status==3">采购完成</text>
					<text v-if="item.status==4">合同已上传</text>
					<text v-if="item.status==5">合同已签订</text>
				</view>
				<view class="list">
					<text class="name">订单类型</text>
					<text v-if="item.type=='1'">运输订单</text>
					<text v-else>采购订单</text>
				</view>
				<view class="goods" style="margin-top: 20rpx;" >
					<text class="name">商品名称</text>
					<text class="name" >商品数量</text>
					<text class="name">商品单价</text>
				</view>
				<view class="goods" v-for="(item2,index) in item.goods" :key="index">
					<text>{{item2.goods_name}}</text>
					<text>{{(item2.goods_num*1).toFixed(4)}}</text>
					<text>{{item2.goods_price}}</text>
				</view>
				<view class="list">
					<text class="name">创建时间</text>
					<text>{{item.creation_time}}</text>
				</view>
			</view>
			<view class="btnbox">
				<view class="btn" v-if="item.status==1" @tap="toUpload(item)">上传合同</view>
				<view class="btn" v-if="item.status>=1&&item.status<=3" @tap="toUpload(item)">上传补充协议</view>
				<view class="btn" v-if="item.status==5||item.status==2" @tap="placeOrder(item)">下单</view>
				<navigator class="btn" :url="'./orderInfo?id=' + item.id" hover-class="none">查看详情</navigator>
				<view class="btn" v-if="item.status==2" @tap="dialogToggle(item.id)">完成采购</view>
			</view>
		</view>
	
		<!-- 筛选弹窗 -->
		<view class="popup" @tap="close" v-if="showPopup">
			<view class="box" @tap.stop="!close">
				<view class="uni-input-wrapper ipt">
					<input placeholder-class="input-style" placeholder="请输入订单编号" v-model="search" />
					<uni-icons type="clear" size="24" color="#c0c4cc" v-if="search!=''"
						@click="search = ''"></uni-icons>
				</view>
				<!-- <uni-data-select v-model="type" :localdata="range" placeholder="请选择"
					style="margin-bottom: 20rpx;"></uni-data-select> -->
				<view class="uni-list-cell-db ipt">
					<picker mode="date" :value="startDate" @change="bindDateChange">
						<view class="uni-input" v-if="startDate">{{startDate}}</view>
						<view class="input-style" v-else>请选择开始日期</view>
					</picker>
					<text style="color: #999;">——</text>
					<picker mode="date" :value="endDate" @change="bindEndChange">
						<view class="uni-input" v-if="endDate">{{endDate}}</view>
						<view class="input-style" v-else>请选择结束日期</view>
					</picker>
				</view>
				<view class="btnbox">
					<view class="btn" @tap="reset">重置</view>
					<view class="btn search" @tap="searchList">搜索</view>
				</view>
			</view>
		</view>

		<!-- 结束接单弹窗 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="确认" title="提示" content="确认关闭下单？"
				@confirm="closeOrder"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import uploadUrl from '../../network/utils.js';
	import {
		getOrderList,
		endOrder,uploadContract
	} from '../../network/order.js';
	import {
		onShow,
		onLoad,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	const active = ref('')
	onNavigationBarButtonTap(() => {
		showPopup.value = true
	})
	onShow(() => {
		list.length = []
		getList()
	})
	const list = reactive([])
	const getList = () => {
		let data = {
			signer_status: active.value,
			sn_code: search.value,
			start_date: startDate.value,
			end_date: endDate.value
		}
		getOrderList(data).then(res => {
			let arr  = res.data.data.sort( function(a, b) {
				return   new Date(b.creation_time) -  new Date(a.creation_time)
			})
			Object.assign(list, arr)
		})
	}
	const checktab = (type) => {
		active.value = type
		list.length = []
		getList()
	}
	const showPopup = ref(false)
	const range = reactive([{
			value: 0,
			text: '接单有效截止日期'
		},
		{
			value: 1,
			text: '下单时间'
		},
		{
			value: 1,
			text: '计划发车时间'
		}
	])
	const search = ref('')
	const type = ref('')
	const close = () => {
		showPopup.value = false
	}
	const startDate = ref('')
	const bindDateChange = (e) => {
		startDate.value = e.detail.value
	}
	const endDate = ref('')
	const bindEndChange = (e) => {
		endDate.value = e.detail.value
	}
	const reset = () => {
		search.value = ''
		type.value = ''
		startDate.value = ''
		endDate.value = ''
		showPopup.value = false
		list.length = 0;
		getList()
	}
	const searchList = () => {
		list.length = 0
		getList()
		showPopup.value = false
	}
	const alertDialog = ref(null)
	const dialogToggle = (id) => {
		endId.value = id
		alertDialog.value.open()
	}
	const endId = ref('')
	const closeOrder = () => {
		let data = {
			order_id: endId.value
		}
		endOrder(data).then(res => {
			endId.value = ''
			uni.showToast({
				title: '关闭成功'
			})
			list.length = 0
			getList()
		})
	}
	const placeOrder = (item) => {
		uni.navigateTo({
			url: './placeOrder?id=' + item.id
		})
	}
	const fileUrl = ref('')
	const toUpload = (item) => {
		uni.navigateTo({
			url:'./upload?id=' + item.id +'&type=' + item.type
		})
	}
</script>

<style lang="scss">
	.tab {
		width: 100%;
		margin-top: 2rpx;
		display: flex;
		justify-content: space-between;

		.list {
			width: 33%;
			line-height: 80rpx;
			font-size: 28rpx;
			text-align: center;
			background-color: #fff;
		}

		.active {
			background-color: #ffc400;
		}
	}

	.box {
		border: 2rpx solid #f7f7f7;
	}

	.item {
		margin: 20rpx 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		.code {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;

			.status {
				font-size: 28rpx;
			}
		}

		.list {
			width: 100%;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #333;

			.name {
				display: inline-block;
				width: 180rpx;
				text-align: right;
				margin-right: 30rpx;
			}
		}

		.goods {
			padding: 10rpx 30rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			background-color: #f7f7f7;
			align-items: center;

			text {
				width: 33.3%;
				text-align: center;
			}
		}
	}

	.btnbox {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		padding: 0 30rpx;
		box-sizing: border-box;
		gap: 30rpx;
		margin: 30rpx 0;

		.btn {
			height: 50rpx;
			width: 160rpx;
			font-size: 24rpx;
			line-height: 50rpx;
			text-align: center;
			background-color: #ffc400;
			border-radius: 10rpx;
		}
	}

	.popup {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 999;
		transition: all .5s;

		.box {
			width: 100%;
			height: 360rpx;
			background-color: #fff;
			padding: 50rpx 30rpx;
			box-sizing: border-box;
			gap: 10rpx;
			padding-bottom: 20rpx;

			.ipt {
				height: 70rpx;
				border: 2rpx solid #e5e5e5;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				input {
					width: 700rpx;
				}
			}

			.btnbox {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;

				.btn {
					width: 180rpx;
					height: 60rpx;
					background-color: #f8f8f8;
					line-height: 60rpx;
					text-align: center;
					border-radius: 12rpx;
					font-size: 28rpx;
				}

				.search {
					background-color: #ffc400;
				}
			}
		}
	}
</style>